<template>
  <div>
    <header>
      <div class="warp">

        <h1 class="logo">
          <router-link :to="{name:'Home'}">网易云音乐</router-link>
        </h1>
        <ul class="nav">
          <li class="nav-big " :class="fullPath!=='/MyMusic'&&fullPath!=='/Friend'?'active-first':''">
            <router-link :to="{name:'Home'}">发现音乐</router-link>
            <sub class="cor"></sub>
          </li>
          <li class="nav-big" :class="fullPath==='/MyMusic'?'active-first':''">
            <router-link :to="{name:'MyMusic'}">我的音乐</router-link>
            <sub class="cor"></sub>
          </li>
          <li class="nav-small" :class="fullPath==='/Friend'?'active-first':''">
            <router-link :to="{name:'Friend'}">关注</router-link>
            <sub class="cor"></sub>
          </li>
          <li class="nav-small">
            <a href="https://music.163.com/store/product">商城</a>
          </li>
          <li class="nav-middle">
            <a href="https://music.163.com/st/musician">音乐人</a>
          </li>
          <li class="nav-max">
            <a href="https://music.163.com/#/download">下载客户端</a>
            <sup class="hot"></sup>
          </li>
        </ul>
        <div class="nav-search">
          <div class="search">
            <span class="iconfont icon-fangdajing"></span>
            <input type="text" :placeholder="placeholder" @focus="handleFocus"
                   v-model="keyword"
                   @blur="handleBlur"
                   @keyup.enter="handleEnter"
                   onfocus="this.placeholder=''"
                   onblur="this.placeholder='音乐/视频/电台/用户'"
            >
          </div>
          <div class="u-lstlay" v-show="isShow">
            <div class="m-schlist">
              <p class="note">
                <router-link :to="{name:'SearchView',query:{word:keyword,type:'1002'}}" class="xtag"
                             v-if="keyword.length<=16">搜“{{ keyword }}”相关用户>
                </router-link>
                <router-link :to="{name:'SearchView',query:{word:keyword,type:'1002'}}" class="xtag" v-else>
                  搜“{{ keyword.slice(0, 17) + "..." }}”相关用户>
                </router-link>
              </p>
              <div class="rap">
                <div class="itm" v-if="searchList.songs">
                  <h3 class="hd">
                    <i class="icon-1"></i>
                    <em class="f-f1">单曲</em>
                  </h3>
                  <ul class="f-cb">
                    <li v-for="(item,index) in searchList.songs" :key="index">
                      <router-link :to="{name:'SearchView',query:{word:keyword,type:'1'}}" class="s-c0">
                        <!--                        <span class="s-fc7">U</span>-->
                        {{ item.name }} - {{ item.artists[0].name }}
                      </router-link>
                    </li>
                  </ul>
                </div>
                <div class="itm" v-if="searchList.artists">
                  <h3 class="hd">
                    <i class="icon-2"></i>
                    <em class="f-f1">歌手</em>
                  </h3>
                  <ul class="f-cb">
                    <li v-for="(singer,i) in searchList.artists" :key="i">
                      <router-link :to="{name:'SearchView',query:{word:keyword,type:'100'}}" class="s-c0">
                        <!--                        <span class="s-fc7">U</span>-->
                        {{ singer.name }}
                      </router-link>

                    </li>
                  </ul>
                </div>
                <div class="itm" v-if="searchList.albums">
                  <h3 class="hd">
                    <i class="icon-3"></i>
                    <em class="f-f1">专辑</em>
                  </h3>
                  <ul class="f-cb">
                    <li v-for="(album,a) in searchList.albums" :key="a">
                      <router-link :to="{name:'SearchView',query:{word:keyword,type:'10'}}" class="s-c0">
                        <!--                        <span class="s-fc7">U</span>-->
                        {{ album.name }} - {{ album.artist.name }}
                      </router-link>

                    </li>
                  </ul>
                </div>
                <div class="itm" v-if="searchList.playlists">
                  <h3 class="hd">
                    <i class="icon-4"></i>
                    <em class="f-f1">歌单</em>
                  </h3>
                  <ul class="f-cb">
                    <li v-for="(play,p) in searchList.playlists" :key="p">
                      <router-link :to="{name:'SearchView',query:{word:keyword,type:'1000'}}" class="s-c0">
                        <!--                        <span class="s-fc7">U</span>-->
                        {{ play.name }}
                      </router-link>

                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="make-header">
          <div class="top-head">
            创作者中心
          </div>
        </div>
        <div class="login">
          <div class="head" v-if="JSON.stringify(userinfo)!=='{}'" @mouseenter="showMain=true"
               @mouseleave="showMain=false">
            <img v-lazy="userinfo.avatarUrl" alt="" v-if="userinfo">
            <a href="#" class="mask"></a>
            <i class="topmsg">1</i>
          </div>
          <a href="javascript:;" @click.prevent="loginBtn" v-if="JSON.stringify(userinfo)==='{}'">登录</a>
          <div class="j-uflag" v-show="showMain" @mouseover="showMain=true" @mouseleave="showMain=false"
               v-if="JSON.stringify(userinfo)!=='{}'">
            <ul class="fb f-cb">
              <li>
                <router-link :to="{name:'UserDetailView',params:{id:userinfo.userId,type:1}}" class="itm-1">
                  <i class="icn-hm"></i>
                  <em>我的主页</em>
                </router-link>
              </li>
              <li>
                <router-link :to="{name:'MsgHome',query:{id:userinfo.userId}}" class="itm-1">
                  <i class="icn-msg"></i>
                  <em>我的消息</em>
                  <span class="topmsg">1</span>
                </router-link>
              </li>
              <li>
                <router-link :to="{name:'Level',query:{id:userinfo.userId}}" class="itm-1">
                  <i class="icn-lv"></i>
                  <em>我的等级</em>
                </router-link>
              </li>
              <li>
                <router-link :to="{name:'Member',query:{id:userinfo.userId}}" class="itm-1">
                  <i class="icn-mbr"></i>
                  <em>VIP会员</em>
                </router-link>
              </li>
            </ul>
            <ul class="ltb f-cb">
              <li>
                <router-link :to="{name:'Update',query:{id:userinfo.userId}}"  class="itm-2">
                  <i class="icn-st"></i>
                  <em>个人设置</em>
                </router-link>
              </li>
              <li>
                <a href="javascript:void(0)" class="itm-2">
                  <i class="icn-verify"></i>
                  <em>实名认证</em>
                </a>
              </li>
            </ul>
            <ul class="lt f-cb">
              <li>
                <a href="javascript:;" class="itm-3" @click.prevent="LoginOut">
                  <i class="icn-ex"></i>
                  <em>退出</em>
                </a>
              </li>
            </ul>
            <i class="arr"></i>
          </div>
        </div>
      </div>

    </header>
    <div class="mrc-modal" v-if="showLogin">
      <div class="mrc-modal-mask">
      </div>
      <div class="mrc-modal-center">
        <div class="mrc-modal-container">
          <div class="_2f_EK7Ln">
            登录
            <i class="_3ENM2xDN" @click="closeLogin"></i>
          </div>
          <!--扫码登录-->
          <div class="_1a7hecWJ" v-if="!numLogin&&!register&&!isLoad">
            <div class="_2ZvLTzzp">
              <div class="_2t0Z3pyt">
                <div class="_16n8NN9l" v-if="!otherLogin">
                  <div class="U9Fi3aaD">
                    <div class="_2Vup8U0F">
                      <img src="../../assets/shao.png" alt="">
                    </div>
                    <div class="OAIqFTtr">
                      <h3>扫码登录</h3>
                      <div class="_2SF8rF8D">
                        <img :src="qrimgs" alt="" style="height: 128px; width: 128px;">
                        <div class="aQceH2yV" v-if="outDate">
                          <p>二维码已失效</p>
                          <a href="javascript:;" class="_8XT01x0I" @click.prevent="refresh">点击刷新</a>
                        </div>
                      </div>
                      <p class="vsVR_YH">
                        使用
                        <a href="https://music.163.com/download">网易云音乐APP</a>
                        扫码登录
                      </p>
                    </div>
                  </div>
                  <a href="javascript:;" class="_3xIXD0Q6" @click.prevent="toOther()">选择其他登录模式</a>
                </div>

                <div class="_2unbCaee" v-if="otherLogin">
                  <div class="_2X-_U3Yk">
                    <div class="_3Cb44UQT">
                      <img src="../../assets/cound.png" alt="">
                      <a href="javascript:;" class="_1Gh25bMk href" style="margin-top: 10px;" @click="toNumLogin">
                        <div class="tan2MIhq">手机号登录</div>
                      </a>
                      <a href="javascript:;" class="_34iSbAnD href" style="margin-top: 10px;" @click="toRegister">
                        <div class="tan2MIhq">注册</div>
                      </a>
                    </div>
                    <div class="_3x8w3YCi">
                      <ul>
                        <li>
                          <a href="javascript:;">
                            <i class="SVpiOcKA-1"></i>
                            微信登录
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="SVpiOcKA-2"></i>
                            QQ登录
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="SVpiOcKA-3"></i>
                            微博登录
                          </a>
                        </li>
                        <li>
                          <a href="javascript:;">
                            <i class="SVpiOcKA-4"></i>
                            网易邮箱帐号登录
                          </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                  <div class="_3-y6k5jE">
                    <input type="checkbox" id="j-official-terms" v-model:checked="checked">
                    <label for="j-official-terms">同意</label>
                    <a href="http://st.music.163.com/official-terms/service">《服务条款》</a>
                    <a href="http://st.music.163.com/official-terms/privacy">《隐私政策》</a>
                    <a href="https://st.music.163.com/official-terms/children">《儿童隐私政策》</a>
                  </div>
                  <img src="../../assets/erweima.png"
                       class="v9Mt6GXn" @click="toCloud">
                </div>

              </div>
            </div>
          </div>
          <!--手机号-->
          <div class="_1a7hecW5" v-if="numLogin&&!register&&!isLoad">
            <section>
              <div class="JA2jtQOh">
                <div class="_1aXkUzRt">
                  <a class="YmsV5FND" @click.prevent="showCountry=!showCountry">+{{ countryCode }}</a>
                  <input class="_2OT0mQUQ" placeholder="请输入手机号"
                         maxlength="11" type="text"
                         oninput="value=value.replace(/[^\d]/g,'')"
                         v-model:value="numPhone"
                         @focus="checkNum=false"
                         autocomplete="off">
                </div>
                <ul class="_3-3MRnmT" v-if="showCountry">
                  <li v-for="(count,index) in country" :key="index" @click="countryCode=count.code;showCountry=false">
                    <span>{{ count.zh }}</span>
                    <span>+{{ count.code }}</span>
                  </li>
                </ul>
              </div>
              <div class="_1Za6PFEg">
                <div class="zHE1Zi11">
                  <div class="cWbL7Ab3">
                    <input type="text" class="sR89MU1J" placeholder="请输入验证码"
                           minlength="4"
                           autocomplete="off" v-model:value="captcha" maxlength="4">
                  </div>
                </div>
                <a href="javascript:;" class="_1XRPS4yQ" @click.prevent="checkMobile"
                   :class="sendModel.countFlag?'defaluts':''"
                >
                  <i ref="code">{{ sendModel.btnMsg == null ? sendModel.countNum + 's' : sendModel.btnMsg }}</i>
                </a>
              </div>
              <div class="_2ja9-0tH X237LSaf" v-if="checkNum">
                <i></i>
                <span style="color: #e33232;">{{ checkMsg }}</span>
              </div>
              <div class="_1D0ldyLa">
                <a href="javascript:;">密码登录</a>
                <label>
                  <input type="checkbox" checked>
                  自动登录
                </label>
              </div>
              <div></div>
              <a href="javascript:;" class="_19WWNTbu" style="margin-top: 20px;" @click.prevent="login">
                <div class="tan2MIhq">登录</div>
              </a>
            </section>
            <div class="_1WOC5RVA">
              <a href="javascript:;" class="Z90NHNuv" @click.prevent="numLogin=false"><
                其他登录方式
              </a>
              <a href="javascript:;" @click.prevent="register=true;getCountry()"><
                没有帐号？免费注册
              </a>
            </div>
          </div>
          <!--注册-->
          <div class="_1a7hecW5" v-if="register&&!isLoad">
            <section>
              <div class="JA2jtQOh">
                <div class="_1aXkUzRt">
                  <a class="YmsV5FND" @click.prevent="showCountry=!showCountry">+ {{ countryCode }}</a>
                  <input type="text" class="_2OT0mQUQ" placeholder="请输入手机号" autocomplete="off">
                </div>
                <ul class="_3-3MRnmT" v-if="showCountry">
                  <li v-for="(count,index) in country" :key="index" @click="countryCode=count.code;showCountry=false">
                    <span>{{ count.zh }}</span>
                    <span>+{{ count.code }}</span>
                  </li>
                </ul>
              </div>
              <div class="password">
                <div class="_3fS2zJJH">
                  <div class="cWbL7Ab3">
                    <input type="password" class="sR89MU1J" placeholder="设置登录密码，不少于8位" autocomplete="new-password"
                           @focus="isCheck=true">
                  </div>
                </div>
                <div v-if="isCheck">
                  <div class="_2ja9-0tH">
                    <i></i>
                    <span>密码不能包含空格</span>
                  </div>
                  <div class="_2ja9-0tH X237LSaf">
                    <i></i>
                    <span>包含字母、数字、符号中至少两种</span>
                  </div>
                  <div class="_2ja9-0tH X237LSaf">
                    <i></i>
                    <span>密码长度为8-20位</span>
                  </div>
                </div>
              </div>
              <a href="javascript:;" class="_19WWNTbu" style="margin-top: 20px;">
                <div class="tan2MIhq">下一步</div>
              </a>
            </section>
            <div class="_1WOC5RVA">
              <a href="javascript:;" class="Z90NHNuv" @click.prevent="numLogin=false;register=false"><
                返回登录
              </a>
            </div>
          </div>
          <!--授权-->
          <div class="_1a7hecWJ" v-if="isLoad">
            <div class="_2ZvLTzzp">
              <div class="_2t0Z3pyt">
                <div class="_16n8NN9l">
                  <div class="U9Fi3aaD">
                    <div class="_1ptZRFVS">
                      <img src="../../assets/success.png" alt="">
                      <h3>扫描成功</h3>
                      <p>请在手机上确认登录</p>
                    </div>
                  </div>
                  <a href="javascript:;" class="_3xIXD0Q6" @click.prevent="toOther">选择其他登录模式</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>

import {mapState} from "vuex";

export default {
  name: "index",
  data() {
    return {
      fullPath: '',
      placeholder: '音乐/视频/电台/用户',
      isShow: false,
      keyword: '',
      searchList: {},
      showLogin: false,
      otherLogin: false,
      numLogin: false,
      register: false,
      checked: false,
      isCheck: false,
      unikey: '',//key
      qrurl: '',
      qrimgs: '',//二维码图片
      qrCheckData: {},//状态
      isLogin: false,//是否登录
      outDate: false,
      isLoad: false,//授权,
      timer: null,
      country: [],
      showCountry: false,
      countryCode: 86,
      //验证码
      captcha: '',
      phone: '',
      //密码
      password: '',
      nickname: '',
      //手机号
      numPhone: '',
      //是否显示提示信息
      checkNum: false,
      //提示信息
      checkMsg: '',
      sendModel: {
        // 倒计时周期
        countNum: 60,
        // 用于倒计时标记，true-正在倒计时
        countFlag: false,
        // 定时器
        intervalBtn: {},
        // 默认按钮的值
        btnMsg: '获取验证码'
      },
      showMain: false
    }
  },

  computed: {
    path() {
      return this.$route.path
    },
    ...mapState('userInfo', ['userinfo'])
  },
  methods: {
    handleEnter(){
      if (this.keyword!==''){
        this.$router.push({name:'SearchView',query:{word:this.keyword,type:'1'}})
        this.isShow = false
      }
    },
    loginBtn(){
      this.showLogin=true;
      this.isLogin = false
      this.getKey()
    },
    async LoginOut() {
      let result = await this.$API.reqUserLogout(this.$store.state.track.user.cookies)
      if (result.data.code == 200) {
        this.$store.commit('track/LoginOut')
        this.$store.commit('userInfo/clearInfo')
      }
    },
    //手机登录
    async getLogin() {
      try {
        let result = await this.$API.reqLogin({
          countrycode: this.countryCode,
          captcha: this.captcha,
          phone: this.numPhone,
          timerstamp: new Date().getTime()
        })
        console.log('getLogin', result)
      } catch (e) {
        new Promise((reject) => {
          reject('failed')
        })
      }
    },
    login() {
      if (this.numPhone == "") {
        this.checkMsg = '请输入手机号'
        this.checkNum = true
      } else if (this.numPhone.length > 0) {
        let re = /^1\d{10}$/
        if (re.test(this.numPhone)) {
          if (this.captcha == '') {
            this.checkNum = true
            this.checkMsg = '请输入验证码'
          } else {
            this.VerifyCode()
          }
        } else {
          this.checkMsg = '请输入正确的手机号'
          this.checkNum = true
        }
      }
    },
    // 获取短信验证码，并且实现60秒后 countDown()和getCode()
    // 倒计时
    countDown() {
      // 设置btn倒计时时显示的信息
      this.sendModel.btnMsg = null
      // 更改btn状态
      this.sendModel.countFlag = !this.sendModel.countFlag
      // 设置倒计时
      this.sendModel.intervalBtn = setInterval(() => {
        if (this.sendModel.countNum <= 0) {
          // 重置btn提示信息
          this.sendModel.btnMsg = '获取验证码'
          // 清除定时器
          clearInterval(this.sendModel.intervalBtn)
          // 更改btn状态
          this.sendModel.countFlag = !this.sendModel.countFlag
          // 重置倒计时状态
          this.sendModel.countNum = 60
        }
        // 倒计时
        this.sendModel.countNum--
      }, 1000)
    },
    //校验手机号格式
    checkMobile() {
      if (this.numPhone == "") {
        this.checkMsg = '请输入手机号'
        this.checkNum = true
      } else {
        var re = /^1\d{10}$/
        if (re.test(this.numPhone)) {
          this.countDown()
          this.sendCode(this.numPhone)
        } else {
          this.checkMsg = '请输入正确的手机号'
          this.checkNum = true
        }
      }
    },
    //注册
    async getRegister() {
      let result = await this.$API.reqRegister({
        captcha: this.captcha,
        phone: this.phone,
        password: this.password,
        nickname: this.nickname
      })
      console.log('register', result)
    },
    //发送验证码
    async sendCode(phone) {
      let result = await this.$API.reqRegisterCode({
        ctcode: this.countryCode,
        phone: phone
      })
      console.log('sendCode', result)
    },
    //校验验证码
    async VerifyCode() {
      let result = await this.$API.reqVerifyCode({
        captcha: this.captcha,
        phone: this.numPhone,
        ctcode: this.countryCode
      })
      console.log('VerifyCode', result)
      if (result.data.code == 200) {
        await this.getLogin()
      }
    }
    ,
    //获取二维码的key值
    async getKey() {
      let keyData = await this.$API.reqKey({
        timerstamp: new Date().getTime()
      })
      this.unikey = keyData.data.data.unikey
      await this.loginQqr(this.unikey)
    }
    ,
    //通过key去获取二维码
    async loginQqr(key) {
      let qrData = await this.$API.reqQr({
        timerstamp: new Date().getTime(),//传入参数时间戳
        qrimg: true,
        key,
      })
      this.qrurl = qrData.data.data.qrurl
      this.qrimgs = qrData.data.data.qrimg
      await this.qrCheck()
    }
    ,
    //获取二维码的状态
    async qrCheck() {
      let qrCheckData = await this.$API.reqQrCheck({
        key: this.unikey,
        timerstamp: new Date().getTime(),//传入参数时间戳
      })
      this.isLogin = true
      this.qrCheckData = qrCheckData
    },
    toOther() {
      clearInterval(this.timer)
      this.otherLogin = true;
      this.isLoad = false;
      this.qrimgs = ''
    }
    ,
    toCloud() {
      this.otherLogin = false;
      this.isLogin = false
      this.getKey()
    },
    refresh() {
      this.isLogin = false
      this.getKey();
      this.outDate = false
    },
    closeLogin() {
      this.showLogin = false
      clearInterval(this.timer)
    },
    toRegister() {
      if (this.checked) {
        this.register = true
        this.getCountry()
      } else {
        this.$message('请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》')
      }
    }
    ,
    toNumLogin() {
      if (this.checked) {
        this.numLogin = true
        this.getCountry()
      } else {
        this.$message('请先勾选同意《服务条款》、《隐私政策》、《儿童隐私政策》')
      }
    }
    ,
    async search(keyword) {
      let result = await this.$API.reqSearchSuggest(keyword)
      this.searchList = result.data.result
    }
    ,
    async getCountry() {
      let result = await this.$API.reqCountry()
      let country = result.data.data
      country.forEach(item => {
        this.country.push(...item.countryList)
      })
    }
    ,
    handleFocus() {
      setTimeout(() => {
        if (this.keyword) {
          this.isShow = true
        }
      }, 150)
    }
    ,
    handleBlur() {
      setTimeout(() => {
        this.isShow = false
      }, 150)
    }
  },
  watch: {
    isLogin() {
      console.log(1)
      clearInterval(this.timer)
      this.timer = setInterval(async () => {
        await this.qrCheck()
        let code = this.qrCheckData.data.code
        console.log(code, this.qrCheckData.data.message)
        //判断返回值中的code
        if (code === 800) {
          clearInterval(this.timer)
          this.outDate = true

        } else if (code === 801) {
        } else if (code === 802) {
          this.isLoad = true
        } else if (code === 803) {
          //用户登录成功后清除定时器
          clearInterval(this.timer)
          this.showLogin = false
          let cookie = this.qrCheckData.data.cookie
          this.$store.commit('track/setCookie', cookie)
          window.location.reload()
        }
      }, 1000)
    },
    path(newVal) {
      this.fullPath = newVal
    },
    keyword(newVal) {
      if (newVal) {
        this.isShow = true
        this.search(newVal)
      } else {
        this.isShow = false
      }
    }
  },
  mounted() {
    this.$store.dispatch('userInfo/Account', this.$store.state.track.user.cookies)
  },
  created() {
    this.fullPath = this.$route.path
    this.$bus.$on('login',()=>{
      this.loginBtn()
    })
  }
}
</script>

<style lang="less" scoped>
header {
  width: 100%;
  height: 70px;
  background-color: #242424;

  .warp {
    width: 1100px;
    height: 100%;
    margin: 0 auto;

    .logo {
      width: 176px;
      height: 69px;
      float: left;
      background: url("../../assets/topbar.png") no-repeat 0 0;

      a {
        float: left;
        width: 157px;
        height: 100%;
        padding-right: 20px;
        text-indent: -9999px;
      }
    }

    h1 {
      width: 176px;
      height: 100%;
    }

    .nav {
      width: 508px;
      height: 100%;
      float: left;
      margin-right: 65px;
      li{
        &:hover{
          background-color: #000000;
        }
        a{
          &:hover{
            text-decoration: none;
          }
        }
      }

      .active-first {

        background-color: #000;

        .cor {
          display: block;
        }

        a {
          display: inline-block;
          height: 100%;
          color: white;

        }
      }

      .nav-big {
        width: 94px;

      }

      .nav-middle {
        width: 80px;
      }

      .nav-max {
        width: 108px;
        position: relative;

        .hot {
          display: block;
          position: absolute;
          top: 21px;
          left: 99px;
          width: 28px;
          height: 19px;
          background-position: -190px 0;
          background-image: url("../../assets/topbar.png");
        }
      }

      .nav-small {
        width: 66px;
      }

      li {
        height: 100%;
        float: left;
        line-height: 70px;
        text-align: center;
        box-sizing: border-box;
        position: relative;

        .cor {
          display: none;
          position: absolute;
          left: 50%;
          top: 64px;
          width: 12px;
          height: 7px;
          margin-left: -6px;
          overflow: hidden;
          background-position: -226px 0;
          background-image: url("../../assets/topbar.png");
        }

        a {
          font-size: 14px;
          color: #C1CCCC;
        }
      }
    }

    .nav-search {
      float: left;
      width: 158px;
      height: 70px;
      display: flex;
      position: relative;
      align-items: center;
      justify-content: center;
      margin-left: 20px;

      .u-lstlay {
        clear: both;
        top: 60px;
        width: 240px;
        position: absolute;
        z-index: 1000;
        left: 0;
        box-sizing: border-box;
        border: 1px solid #bebebe;
        border-radius: 4px;
        background: #fff;
        box-shadow: 0 4px 7px #555;
        text-shadow: 0 1px 0 rgb(255 255 255 / 90%);

        .m-schlist {
          .note {
            padding: 11px 10px;
            border-bottom: 1px solid #e2e2e2;
            color: #666;

            .xtag {
              color: #666;
              //max-width: 60%;
              display: inline-block;
              //text-overflow: ellipsis;
              //white-space: nowrap;
              //overflow: hidden;
            }
          }

          .rap {

            .itm {
              height: auto;
              overflow: hidden;

              .hd {
                float: left;
                width: 52px;
                margin-right: -100px;
                padding: 10px 0 0 10px;
                *padding-top: 9px;
                line-height: 17px;
                *line-height: 19px;
                font-weight: normal;

                i {
                  float: left;
                  margin: 0px 4px 0 0;
                  display: inline-block;
                  overflow: hidden;
                  vertical-align: middle;
                  width: 14px;
                  height: 15px;
                  background-image: url("../../assets/icon.png");
                }

                .icon-1 {

                  background-position: -35px -300px;
                }

                .icon-2 {
                  background-position: -50px -300px;
                }

                .icon-3 {
                  background-position: -35px -320px;
                }

                .icon-4 {
                  background-position: -50px -320px;
                }

                .f-f1 {
                  float: left;
                }
              }

              .f-cb {
                //background: #f9f8f8;
                margin-left: 62px;
                margin-top: -1px;
                padding: 6px 0 5px;
                height: auto;
                overflow: hidden;
                border-top: 1px solid #e2e2e2;
                border-left: 1px solid #e2e2e2;

                li {
                  width: 100%;
                  float: left;

                  .s-c0 {
                    display: block;
                    width: 100%;
                    text-indent: 12px;
                    line-height: 24px;
                    color: #000;
                    text-decoration: none;
                    max-width: 95%;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    overflow: hidden;

                    &:hover {
                      background: #E3E5E7;
                    }

                    .s-fc7 {
                      color: #0c73c2;
                      text-decoration: none;
                    }
                  }
                }
              }
            }
          }
        }
      }

      .search {
        position: relative;
        width: 158px;
        height: 32px;

        background-color: #fff;
        border-radius: 16px;
        overflow: hidden;

        .iconfont {
          position: absolute;
          top: 8px;
          left: 8px;
        }

        input {
          margin-top: 10px;
          border: none;
          /* text-indent: 2.2em; */
          overflow: hidden;
          width: 76%;
          margin-right: 8px;
          float: right;
          white-space: nowrap;
        }

      }
    }

    .make-header {
      float: left;
      width: 90px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 15px;

      .top-head {
        width: 90px;
        height: 32px;
        color: #CCCCCC;
        text-align: center;
        line-height: 32px;
        border-radius: 16px;
        border: 1px solid #4F4F4F;
      }
    }

    .login {
      float: right;
      width: 50px;
      height: 45px;
      text-align: center;
      line-height: 45px;
      margin-right: 15px;
      margin-top: 15px;
      position: relative;

      a {
        color: #787878;
      }

      .head {
        margin-top: 5px;
        margin-left: 15px;
        float: left;
        width: 30px;
        height: 30px;
        position: relative;

        img {
          border-radius: 30px;
          width: 30px;
          height: 30px;
        }

        .mask {
          cursor: pointer;
        }

        .topmsg {
          top: -5px;
          left: 20px;
          display: inline-block;
          min-width: 17px;
          height: 17px;
          padding: 0 4px;
          box-sizing: border-box;
          background: #C20C0C;
          border-radius: 18px;
          border: 1px solid #242424;
          line-height: 16px;
          font-size: 12px;
          white-space: nowrap;
          color: #fff;
          text-align: center;
          position: absolute;
        }
      }

      .j-uflag {
        position: absolute;
        top: 42px;
        right: -61px;
        width: 158px;
        background: #2b2b2b;
        border: 1px solid #202020;
        box-shadow: 0 8px 24px 0 rgb(0 0 0 / 50%);
        border-radius: 4px;
        z-index: 7000;

        ul {
          li {
            &:hover {
              background-color: #353535;
            }

            a {
              i {
                float: left;
                width: 18px;
                height: 18px;
                margin: 7px 10px 0 0;
                background-image: url("../../assets/toplist.png");
              }

              em {
                float: left;
                width: 100px;
              }
            }
          }
        }

        a {
          height: 34px;
          line-height: 34px;
          position: relative;
          box-sizing: border-box;
          overflow: hidden;
          padding-left: 24px;
          color: #ccc;
        }

        li, li a {
          float: left;
          box-sizing: border-box;
          width: 100%;
        }

        .f-cb {
          &:after {
            clear: both;
            content: '.';
            display: block;
            height: 0;
            visibility: hidden;
          }
        }

        .fb {
          li {

            .itm-1 {
              .icn-hm {
                background-position: 0 -80px;
              }

              .icn-msg {
                background-position: -20px -120px;
              }

              .icn-lv {
                background-position: 0 -100px;
              }

              .icn-mbr {
                background-position: 0 -221px;
                margin-top: 9px;
              }

              .topmsg {
                top: 7px;
                left: 110px;
                display: inline-block;
                min-width: 17px;
                height: 17px;
                padding: 0 4px;
                box-sizing: border-box;
                background: #C20C0C;
                border-radius: 18px;
                border: 1px solid #242424;
                line-height: 16px;
                font-size: 12px;
                white-space: nowrap;
                color: #fff;
                text-align: center;
                position: absolute;
              }
            }
          }
        }

        .ltb {
          border: 1px solid #232323;
          border-width: 1px 0;

          li {
            .itm-2 {
              .icn-st {
                background-position: 0 -140px;
              }

              .icn-verify {
                background-position: -20px -142px;
              }
            }
          }
        }

        .lt {
          li {
            .itm-3 {
              .icn-ex {
                background-position: 0 -200px;
              }

              em {

              }
            }
          }
        }

        .arr {
          margin-left: -8px;
          position: absolute;
          top: -8px;
          left: 50%;
          width: 14px;
          height: 8px;
          background-position: -20px 0;
          background-image: url("../../assets/toplist.png");

        }
      }
    }

  }

}

.mrc-modal {
  position: absolute;
  z-index: 1000;

  .mrc-modal-mask {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;

    background-color: rgba(0, 0, 0, 0.65);
    opacity: 1;
  }

  .mrc-modal-center {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    -webkit-overflow-scrolling: touch;
    pointer-events: none;

    .mrc-modal-container {
      position: relative;
      opacity: 1;
      background: #fff;
      pointer-events: auto;
      z-index: 9998;
      width: 530px;
      border-radius: 4px;
      box-shadow: 0 5px 16px rgb(0 0 0 / 80%);
      border: none;

      ._2f_EK7Ln {
        position: relative;
        margin: 0;
        padding: 0 45px 0 18px;
        height: 38px;
        line-height: 38px;
        z-index: 10;
        border-bottom: 1px solid #191919;
        border-radius: 4px 4px 0 0;
        background: #2d2d2d;
        font-weight: bold;
        font-size: 14px;
        color: #fff;

        ._3ENM2xDN {
          font-style: normal;
          position: absolute;
          z-index: 20;
          top: 16px;
          right: 20px;
          width: 10px;
          height: 10px;
          overflow: hidden;
          text-indent: -9999px;
          cursor: pointer;
          background: url(../../assets/bottom.png) no-repeat;
          background-position: 0 -95px;
        }
      }

      ._1a7hecWJ {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        margin: auto;
        padding: 0;
        border: 1px solid #d8d8d8;
        border-width: 0 1px 1px;
        border-radius: 0 0 4px 4px;
        background: #fff;

        ._2ZvLTzzp {
          box-sizing: content-box;
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: center;
          -webkit-justify-content: center;
          justify-content: center;
          -webkit-box-align: center;
          -webkit-align-items: center;
          align-items: center;

          ._2t0Z3pyt {
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            flex-direction: column;
            width: 538px;
            height: 326px;
            background-color: #fff;

            ._16n8NN9l {
              box-sizing: content-box;

              .U9Fi3aaD {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
                height: 220px;

                ._2Vup8U0F {
                  box-sizing: content-box;

                  img {
                    width: 125px;
                    height: 220px;
                  }
                }

                .OAIqFTtr {
                  margin-left: 25px;
                  width: 200px;
                  text-align: center;

                  h3 {
                    font-size: 18px;
                    font-weight: 500;
                  }

                  ._2SF8rF8D {
                    position: relative;
                    width: 138px;
                    height: 138px;
                    padding: 4px;
                    margin: 13px auto;

                    .aQceH2yV {
                      position: absolute;
                      top: 0;
                      right: 0;
                      bottom: 0;
                      left: 0;
                      background: rgba(255, 255, 255, 0.9);

                      p {
                        margin: 45px auto 6px;
                        font-size: 12px;
                        color: rgba(0, 0, 0, 0.8);
                        font-weight: 500;
                      }

                      ._8XT01x0I {
                        display: block;
                        margin: 0 auto;
                        padding-right: 0;
                        width: 64px;
                        height: 24px;
                        line-height: 24px;
                        text-align: center;
                        border-radius: 4px;
                        background: -webkit-linear-gradient(top, #81DD81 0%, #55A055 100%);
                        background: linear-gradient(180deg, #81DD81 0%, #55A055 100%);
                        border: 1px solid #5BAF5B;
                        box-shadow: inset 0 -1px 1px 1px rgb(185 230 5.96774194%);
                        color: #fff;
                        font-size: 12px;
                      }
                    }
                  }

                  .vsVR_YH {
                    font-size: 12px;
                    top: 181px;
                    width: 200px;
                    right: -15px;
                    left: auto;
                    line-height: 17px;
                    color: rgba(0, 0, 0, 0.4);

                    a {
                      color: #0c73c2;
                    }
                  }
                }

                ._1ptZRFVS {
                  img {
                    width: 140px;
                    height: 140px;
                  }

                  h3 {
                    margin-top: 12px;
                    font-size: 18px;
                    font-weight: 450;
                    line-height: 24px;
                    text-align: center;
                    color: rgba(0, 0, 0, 0.8);
                  }

                  p {
                    margin-top: 4px;
                    font-size: 14px;
                    color: #333;
                    text-align: center;
                  }
                }
              }

              ._3xIXD0Q6 {
                display: block;
                width: 118px;
                height: 28px;
                margin: 20px auto 0;
                padding-right: 0;
                font-size: 12px;
                border: 1px solid #979797;
                border-radius: 15px;
                line-height: 28px;
                text-align: center;
                color: rgba(0, 0, 0, 0.8);
                text-decoration: none;
              }
            }

            ._2unbCaee {
              box-sizing: content-box;

              ._2X-_U3Yk {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -webkit-align-items: center;
                align-items: center;
                height: 220px;

                ._3Cb44UQT {
                  width: 224px;
                  padding: 0 35px 3px 40px;
                  border-right: 1px dotted #ccc;

                  img {
                    width: 224px;
                    height: 120px;
                  }

                  .href {
                    position: relative;
                    display: -webkit-box;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-box-align: center;
                    -webkit-align-items: center;
                    align-items: center;
                    -webkit-box-pack: center;
                    -webkit-justify-content: center;
                    justify-content: center;
                    white-space: nowrap;
                    margin: 0 auto;
                    padding: 0 5px 0 0;
                    height: 31px;
                    font-size: 12px;
                    background: url(../../assets/obj.png) no-repeat 0 9999px;
                  }

                  ._1Gh25bMk {
                    width: 219px;
                    color: #fff;
                    background-position: right -428px;

                    &:hover {
                      background-position: right -510px !important;
                    }

                    &:hover .tan2MIhq {
                      background-position: 0 -469px !important;
                    }

                    .tan2MIhq {
                      width: 184px;
                      background-position: 0 -387px;

                    }
                  }

                  a {
                    div {
                      background: url(../../assets/obj.png) no-repeat 0 9999px;
                      padding: 0 15px 0 20px;
                      height: 100%;
                      line-height: 31px;
                      text-align: center;
                    }
                  }

                  ._34iSbAnD {
                    width: 219px;
                    color: #333;
                    background-position: right -100px;

                    .tan2MIhq {
                      width: 184px;
                      background-position: 0 -59px;

                      &:hover {
                        background-position: 0 -141px;
                      }
                    }
                  }
                }

                ._3x8w3YCi {
                  padding: 3px 0 3px 39px;
                  margin-top: -15px;

                  ul {
                    height: auto;
                    overflow: hidden;

                    li {
                      margin-top: 15px;

                      a {
                        font-size: 12px;
                        color: #333;
                        line-height: 38px;

                        &:hover {
                          text-decoration: underline !important;
                        }

                        i {
                          display: inline-block;
                          vertical-align: middle;
                          margin-right: 14px;
                          width: 38px;
                          height: 38px;
                          background: url(../../assets/objIcom.png) no-repeat 0 9999px;
                        }

                        .SVpiOcKA-1 {
                          background-position: -150px -670px;

                        }

                        .SVpiOcKA-2 {
                          background-position: -190px -670px;

                        }

                        .SVpiOcKA-3 {
                          background-position: -231px -670px;

                        }

                        .SVpiOcKA-4 {
                          background-position: -271px -670px;
                        }
                      }

                    }
                  }
                }
              }

              ._3-y6k5jE {
                margin-left: 40px;
                margin-top: 30px;
                font-family: NotoSansHans-Regular;
                font-size: 10px;
                color: rgba(0, 0, 0, 0.4);
                line-height: 15px;

                #j-official-terms {
                  -webkit-appearance: checkbox;
                  vertical-align: middle;
                }

                label {
                  margin-left: 2px;
                }

                a {
                  color: #507DAF;
                }
              }

              .v9Mt6GXn {
                position: absolute;
                right: 0;
                bottom: 0;
                width: 52px;
                height: 52px;
              }
            }

          }
        }
      }

      ._1a7hecW5 {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -webkit-flex-direction: column;
        flex-direction: column;
        margin: auto;
        padding: 0;
        border: 1px solid #d8d8d8;
        border-width: 0 1px 1px;
        border-radius: 0 0 4px 4px;
        background: #fff;

        section {
          margin: 0 auto;
          padding: 30px 0 43px;
          width: 220px;

          .JA2jtQOh {
            position: relative;
            margin: 0;
            height: 30px;
            line-height: 30px;
            border: 1px solid #cdcdcd;
            border-radius: 2px;
            z-index: 11;

            ._1aXkUzRt {
              height: 100%;

              .YmsV5FND {
                position: relative;
                float: left;
                display: block;
                height: 30px;
                line-height: 30px;
                padding: 0 18px 0 5px;
                border-right: 1px solid #cdcdcd;
                color: #333;

                &:hover {
                  text-decoration: none;
                }

                &::after {
                  content: '';
                  position: absolute;
                  top: 14px;
                  right: 7px;
                  width: 7px;
                  height: 4px;
                  background: url(../../assets/obj_wo3.png) no-repeat  -260px -450px;
                }
              }

              ._2OT0mQUQ {
                display: block;
                padding: 0 8px;
                width: 68%;
                height: 100%;
                outline: none;
                border: none;
                color: #333;
                background: none;
              }
            }

            ._3-3MRnmT {
              position: absolute;
              top: 31px;
              left: -1px;
              width: 220px;
              height: 128px;
              border: 1px solid #cdcdcd;
              border-top: none;
              clear: both;
              background-color: #fff;
              overflow: auto;

              li {
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: justify;
                -webkit-justify-content: space-between;
                justify-content: space-between;
                padding: 0 7px;
                height: 32px;
                line-height: 32px;
                color: #333;
                cursor: pointer;
                overflow: hidden;
              }
            }
          }

          .password {
            .X237LSaf {
              i {
                background: url(../../assets/obj_wo4.png) -50px -270px no-repeat !important;

              }
            }

            ._2ja9-0tH {
              color: #333;
              margin-top: 5px;

              i {
                display: inline-block;
                overflow: hidden;
                vertical-align: middle;
                margin-top: -2px;
                margin-right: 8px;
                width: 14px;
                height: 14px;
                background: url(../../assets/yes.png) no-repeat;
                text-decoration: none;
              }

              span {

              }
            }

            ._3fS2zJJH {
              margin-top: 10px;
              position: relative;
              margin: 0;
              height: 30px;
              line-height: 30px;
              border: 1px solid #cdcdcd;
              border-radius: 2px;
              z-index: 10;

              .cWbL7Ab3 {
                height: 100%;

                .sR89MU1J {
                  display: block;
                  padding: 0 8px;
                  width: 100%;
                  height: 100%;
                  outline: none;
                  border: none;
                  color: #333;
                  background: none;
                  box-sizing: border-box;
                }
              }
            }
          }

          ._1Za6PFEg {
            margin-top: 10px;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;

            .zHE1Zi11 {
              width: 136px;
              position: relative;
              margin: 0;
              height: 30px;
              line-height: 30px;
              border: 1px solid #cdcdcd;
              border-radius: 2px;
              z-index: 10;

              .cWbL7Ab3 {
                height: 100%;

                .sR89MU1J {
                  display: block;
                  padding: 0 8px;
                  width: 100%;
                  height: 100%;
                  outline: none;
                  border: none;
                  color: #333;
                  background: none;
                  box-sizing: border-box;
                }
              }
            }

            ._1XRPS4yQ {
              display: inline-block;
              padding: 0 5px 0 0;
              width: 70px;
              height: 31px;
              line-height: 31px;
              color: #333;
              overflow: hidden;
              vertical-align: top;
              text-align: center;
              white-space: nowrap;
              cursor: pointer;
              background: url(../../assets/obj.png) right -100px no-repeat;

              i {
                display: inline-block;
                width: 61px;
                padding: 0 2px 0 7px;
                background: url(../../assets/obj.png) 0 -141px no-repeat;
                text-align: center;
              }
            }
          }

          ._1D0ldyLa {
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: justify;
            -webkit-justify-content: space-between;
            justify-content: space-between;
            margin-top: 10px;
            color: #666;

            a {
              color: #666;
            }

            label {
              input {
                margin: 0 6px 0 0;
                vertical-align: middle;
                -webkit-appearance: checkbox;
                font-size: 12px;
                color: #333;
                font-family: Arial, Helvetica, sans-serif;
                -webkit-text-size-adjust: none;
              }
            }
          }

          ._19WWNTbu {
            width: 215px;
            color: #fff;
            position: relative;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            -webkit-box-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            white-space: nowrap;
            margin: 0 auto;
            padding: 0 5px 0 0;
            height: 31px;
            font-size: 12px;
            background: url(../../assets/obj.png) no-repeat right -428px;

            &:hover {
              background-position: right -510px;
            }

            &:hover .tan2MIhq {
              background-position: 0 -469px;
            }

            .tan2MIhq {
              width: 180px;
              background: url(../../assets/obj.png) no-repeat 0 -387px;
              padding: 0 15px 0 20px;
              height: 100%;
              line-height: 31px;
              text-align: center;
            }
          }
        }

        ._1WOC5RVA {
          display: -webkit-box;
          display: -webkit-flex;
          display: flex;
          -webkit-box-pack: justify;
          -webkit-justify-content: space-between;
          justify-content: space-between;
          padding: 0 19px;
          height: 48px;
          border-top: 1px solid #c6c6c6;
          border-radius: 0 0 4px 4px;
          line-height: 48px;
          background-color: #f7f7f7;

          a {
            font-size: 12px;
            color: #999;
            text-decoration: none;
          }

          .Z90NHNuv {
            color: #0c72c3;
          }
        }
      }
    }
  }
}


</style>